<template>
  <div class="test-header">
    <div class="left">{{}}</div>
    <div class="middle">
      <div class="middle-two">
        <div class="middle-three">{{ times }}</div>
      </div>
    </div>
    <div class="right"></div>
  </div>
</template>
<script>
import { computed, onMounted, watch, onUnmounted } from "@vue/runtime-core";
import { useStore } from "vuex";
export default {
  name: "Test-Header",
  props: {
    target: {
      type: Number,
      default: 0,
    },
  },
  setup() {
    let store = useStore();
    let times = computed(() => {
      return store.state.times;
    });
    let timer = null;

    const timeOpen = () => {
      if (timer) {
        console.log("如果有");
        clearInterval(timer);
        setTime();
      } else {
        setTime();
      }
    };
    const setTime = () => {
      timer = setInterval(() => {
        store.getters.CHANGE_TIMES;
        if (times.value === 0) {
          clearInterval(timer);
        }
      }, 1000);
    };
    onUnmounted(() => {
      clearInterval(timer);
    });
    timeOpen();
    watch(
      () => {
        return times.value;
      },
      (val) => {
        console.log(val, "baasdsad");
        if (val === 20) {
          timeOpen();
        }
        console.log(val, "val");
      }
    );
    return {
      store,
      times,
    };
  },
};
</script>

<style lang="scss" scoped>
.test-header {
  font-size: 0.35rem;
  display: flex;
  align-items: center;
  position: relative;
  top: 0.35rem;
  height: 1rem;
  width: 90%;
  border-radius: 0.55rem;
  background: #65c9fb;
  margin: 0 auto;
  justify-content: space-between;
  .middle {
    width: 1.4rem;
    height: 1.4rem;
    // background: #454199;
    border: 0.07rem solid #454199;
    border-radius: 1.4rem;
    display: flex;
    align-items: center;
    background: #fff;
    .middle-two {
      width: 0.98rem;
      height: 0.98rem;
      border-radius: 0.98rem;
      border: 0.17rem solid #f1a854;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      .middle-three {
        height: 0.89rem;
        border-radius: 0.89rem;
        color: #fff;
        text-align: center;
        line-height: 0.89rem;
        font-size: 0.38rem;
        width: 0.89rem;
        background: #454098;
      }
    }
  }
}
</style>
